<!DOCTYPE html>
<html lang="zh">


<head>
  <!-- Google Tag Manager -->
  <script>(function (w, d, s, l, i) {
      w[l] = w[l] || []; w[l].push({
        'gtm.start':
          new Date().getTime(), event: 'gtm.js'
      }); var f = d.getElementsByTagName(s)[0],
        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'dataLayer', 'GTM-WBG5X5B');</script>
  <!-- End Google Tag Manager -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <!-- CSS -->
  <link rel="stylesheet" type="text/css" href="assets/css/reset.css">
  <link rel="stylesheet" type="text/css" href="assets/css/fontawesome.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/swiper.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/magnific-popup.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/rall.main.min.css">
  <link rel="stylesheet" href="assets/css/elementindex.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/rall.responsive.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/icon.css">

  <script>
      // var _hmt = _hmt || [];
      // (function () {
      //   var hm = document.createElement("script");
      //   hm.src = "https://hm.baidu.com/hm.js?b1015b38bba06b4f282d520fd305cf34";
      //   var s = document.getElementsByTagName("script")[0];
      //   s.parentNode.insertBefore(hm, s);
      // })();
  </script>


</head>

<body data-page="scroll">
  <!-- Google Tag Manager (noscript) -->
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WBG5X5B" height="0" width="0"
      style="display:none;visibility:hidden"></iframe></noscript>
  <!-- End Google Tag Manager (noscript) -->
  <!-- HEADER -->
  <header>
    <div class="header">
      <div class="container">
        <div class="flex align-items-c justify-content-sb" style="height: 60px;">
          <div class="header-logo maopc" id="logo_pc">
          </div>
          <div id="serachInput" class="maomodel-search " style="width: 100%;
          padding: 0 1rem;display: none;">
            <div class="maocontent1">
              <div class="rigthBtn" id="serachBox">
                <!-- 搜索框 -->
              </div>
            </div>
          </div>
          <nav id="menuBox" class="header-menu">
            <div class="header-menu-icon">
              <span class="easing"></span>
              <span class="easing"></span>
              <span class="easing"></span>
            </div>
            <div class="header-menu-view">
              <ul class="lg_flex" id="menu">

              </ul>
            </div>
          </nav>

          <div class="header-logo maopc_xl" id="logo_ph">

          </div>


          <div class="search">
            <div data-type="page-load"><img alt="Rall" id="search-gif" src="../assets/images/search.png"></div>
          </div>

        </div>
      </div>
    </div>
  </header>


  <!-- MAIN -->
  <main>
    <div class="scroll-content " data-page="scroll-content" id="scroll-content">
      <div class="boxNUM maomodel-main">
        <div class="container moduleItem">
          <div class="row">
            <div class="col-12 col-lg-8">
              <div class="si-left mao-single-box">
                <h1 class="mao-big-title mao-mb-small" id="info_title">
                </h1>
                <div class="ji-meta mao-mb-small">
                  <span class="s-time mao-aux-word">
                    <span id="publish_date"></span>
                    <span> <a id="name"></a>
                    </span>
                  </span>
                  <span class="s-social" id="share_setting">

                  </span>
                </div>

                <div class="ji-cat" id="cate">
                  <span class="mao-aux-word" id="tagName1"></span>
                </div>

                <div class="ji-tag mao-mb-small" id="tags">
                  <span class="mao-aux-word" id="tagName2"></span>

                </div>

                <div class="maopc_xl mao-single" id="detailsBox4">

                </div>

                <div id="CeilingBox_xl" class="maomodel-slide-anthor maomodel-slide-anthor-m mao-mt maomobile">
                  <!-- <h4 class="mao-small-title mao-mb-small">
                    Contents
                  </h4>
                  <ul>
                    <li><a class="mao-word-second" name="anthor0" href="#" title="Municipal Management">Municipal
                        Management</a></li>
                    <li><a class="mao-word-second" name="anthor1" href="#" title="Hotel Management">Hotel Management</a>
                    </li>
                    <li><a class="mao-word-second" name="anthor2" href="#"
                        title="Exhibitions and Conferences&nbsp;">Exhibitions and Conferences&nbsp;</a></li>
                    <li><a class="mao-word-second" name="anthor3" href="#" title="Scenic Spots and Theme Parks">Scenic
                        Spots and Theme Parks</a></li>
                    <li><a class="mao-word-second" name="anthor4" href="#" title="Outdoor Activities">Outdoor
                        Activities</a></li>
                  </ul> -->
                </div>

                <div id="detailsBox" class="mao-single">
                  <div id="detailsBox2" class="maopc">

                  </div>
                  <div id="detailsBox3">
                  </div>
                </div>

                <div id="prev_next">

                </div>

                <div id="authorInfo">

                </div>


              </div>
            </div>


            <!-- 右侧独立 -->
            <div class="col-12 col-lg-4 maopc" style="position: relative">
              <div class="si-right">


                <div class="maomodel-slide-email">
                  <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
                  <script>
                    hbspt.forms.create({
                      region: "na1",
                      portalId: "23162827",
                      formId: "0d83b6d9-54b4-4b2b-b355-aaead74b2626"
                    });
                  </script>
                  <div class="hbspt-form">
                    <!-- <form id="myForm3" action="">
                      <div class="hs-richtext hs-main-font-element">
                        <h2 id="sub_tips"></h2>
                      </div>

                      <div class="hs_email hs-email hs-fieldtype-text field hs-form-field hs_email2">
                        <div class="input">
                          <input id="sub_placeholder" value="" autocomplete="email" class="hs-input" type="email"
                            placeholder="" name="email">
                        </div>
                      </div>

                      <div class="hs_submit hs-submit">
                        <input id="sub_btn_txt" type="submit" class="hs-button primary large" value="">
                      </div>
                    </form> -->
                  </div>
                </div>

                <div class="maomodel-slide-search mao-mt mao-mb">
                  <h4 class="mao-small-title mao-mb-small" id="searchH4"></h4>

                  <div class="ji-search">
                    <input id="serachBtn" onkeyup="checkForm(event, this)" type="text" name="s" placeholder="">
                    <button onclick='checkButton()' type="submit" class="mao-btn-fang">
                      <img alt="Rall" id="search-gif" src="assets/images/search1.png">
                    </button>
                  </div>
                </div>

                <div class="maomodel-slide-anthor" id="CeilingBox">
                  <!-- <div id="Ceiling" class="Ceiling">
                    <h4 class="mao-small-title mao-mb-small go_gov">Contents</h4>
                    <ul>
                      <li>
                        <a class="mao-word-second active">Municipal Management</a>
                      </li>
                      <li>
                        <a class="mao-word-second ">Hotel Management</a>
                      </li>
                      <li>
                        <a class="mao-word-second ">Exhibitions and Conferences </a>
                      </li>
                      <li>
                        <a class="mao-word-second ">Scenic Spots and Theme Parks</a>
                      </li>
                      <li>
                        <a class="mao-word-second ">Outdoor Activities</a>
                      </li>
                    </ul>
                  </div>  -->
                </div>
              </div>
            </div>



            <section id="maomodel_last_posts" class="maomodel-last-posts maomodel-mcontent maopc mao-mt">
              <!-- <div class="container">
                <div class="row">

                  <div class=" col-12 maoheader maomodel-header mao-mb-small">
                    <h2 class="mao-big-title">Related Articles</h2>
                  </div>

                  <div class="col-lg-4 col-12">
                    <div class="maocontentU"><a target="_blank"
                        href="https://blog-uat.hytera.com/%e6%b5%8b%e8%af%952.html" class="si-img-box">
                        <div class="ji-img"
                          style="background-image: url(https://blog-uat.hytera.com/wp-content/uploads/2024/04/en_231117_details_2_why_pt590_tetra_portable_radio_has_better_coverage.gif);">
                        </div>
                        <div class="ji-mask">View More</div>
                      </a>
                      <div class="si-content mao-bg"><a href="https://blog-uat.hytera.com/category/mission-critical"
                          target="_blank" class="si-cat mao-btn mao-mb-small">Mission Critical</a><a target="_blank"
                          href="https://blog-uat.hytera.com/%e6%b5%8b%e8%af%952.html"
                          class="mao-small-title mao-line-2 mao-mb-small">Why PT590 TETRA Portable Radio Has Better
                          Coverage?</a>
                        <div class="mao-avatar-box si-meta mao-aux-word mao-mb-small"><a class="mao-avatar"
                            target="_blank" href="https://blog-uat.hytera.com/author/hytera"><img width="30"
                              src="https://secure.gravatar.com/avatar/5c1d95ce01cbf9dbfe6b41c206cf528e?s=96&amp;d=mm&amp;r=g"
                              alt="hytera"><span>hytera</span></a><span>Apr 18, 2024</span></div><a target="_blank"
                          href="https://blog-uat.hytera.com/%e6%b5%8b%e8%af%952.html"
                          class="si-desc mao-word-second mao-line-2 maopc">Whether you’re ensuring public safety,
                          venturing into rough terrain, or organizing a large event, two-way radios are powerful devices
                          to keep you connected with other fellows as a team. The Hyte&nbsp;&nbsp;...</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div> -->
            </section>
          </div>
        </div>



      </div>

      <!-- FOOTER -->
      <footer>
        <section class="maomodel-email mao-mb container">
          <div class="maocontent">
            <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
            <script>
              hbspt.forms.create({
                region: "na1",
                portalId: "23162827",
                formId: "0d83b6d9-54b4-4b2b-b355-aaead74b2626"
              });
            </script>
            <!-- <div class="hbspt-form">
              <form id="myForm">
                <div class="hs-richtext hs-main-font-element" id="subscribeH2">

                </div>

                <div class="hs_email hs-email hs-fieldtype-text field hs-form-field">
                  <div class="input" id="subscribeInput">

                  </div>
                </div>

                <div class="hs_submit hs-submit" id="subscribeBtn">
                </div>
              </form>
            </div> -->
          </div>
        </section>
        <div class="container moduleItem">
          <div class="row">
            <div class="col-12 col-lg-4">
              <div class="maomodel-footer-desc" id="txt0">

              </div>
            </div>
            <div class="col-12 col-lg-4 maopc">
              <div class="maomodel-footer-link mao-mt-small">
                <div class="maomodel-footer-link mao-mt-small">
                  <h2 class="mao-small-title mao-mb-small" id="Label5"></h2>
                  <ul id="navBox">

                  </ul>
                </div>
              </div>
            </div>

            <div class="col-12 col-lg-4">
              <div class="maomodel-footer-contact mao-mt-small">
                <h2 class="mao-small-title mao-mb-small" id="Label1"></h2>
                <div id="txt1">
                </div>
                <p>
                  <a target="_blank" class="mao-btn-fang mao-mb-small" id="Label2"></a>
                </p>
                <div class="si-social maomobile" id="linkBox2">

                </div>
              </div>
            </div>

            <div class="col-12">
              <div class="maomodel-footer-info">
                <div class="si-info" id="txt23">
                </div>
                <div class="si-social maopc" id="linkBox">

                </div>
              </div>
            </div>
          </div>
        </div>
      </footer>
    </div>
  </main>

  <div id="cursor" class="">
    <div class="cursor-plus"><i class="fas fa-plus"></i></div>
  </div>



  <!-- JS -->
  <script src="assets/js/vue.min.js"></script>
  <script src="assets/js/jquery-1.12.4.min.js"></script>
  <script src="assets/js/rall.libraries.js"></script>
  <script src="assets/js/rall.main.js"></script>
  <script src="assets/js/vlt-plugins.min.js"></script>
  <script src="assets/js/vlt-helpers.js"></script>
  <script src="assets/js/vlt-controllers.min.js"></script>
  <script src="../assets/js/utils.js"></script>
  <script type="text/javascript" src="pinyin_dict_withtone.js"></script>
  <script type="text/javascript" src="pinyinUtil.js"></script>


  <script>
    function containsChinese(str) {
      return /[\u4e00-\u9fff]/.test(str);
    }


    document.getElementById('searchH4').innerHTML = searchH4
    document.getElementById('serachBtn').placeholder = searchPlaceholder


    let LabelName = []
    //获取标签设置
    $.ajax({
      url: `${URL_}/api/getLabelSetting`, //请求的url地址
      dataType: "json", //返回格式为json
      async: false, //请求是否异步，默认为异步，这也是ajax重要特性
      data: {}, //参数值
      type: "get", //请求方式
      headers: {
        'Authorization': Authorization
      },
      success: function (res) {
        //请求成功时处理
        res.data.map(res => {
          if (res.type == 7 || res.type == 8) {
            LabelName.push(res)
          }
        })
      },
    });


    let content = ``
    //获取文章详情
    $.ajax({
      url: `${URL_}/api/getArticleDetail`, //请求的url地址
      dataType: "json", //返回格式为json
      async: false, //请求是否异步，默认为异步，这也是ajax重要特性
      data: {
        pla_id: getQueryId('id')
      }, //参数值
      type: "get", //请求方式
      headers: {
        'Authorization': Authorization
      },
      success: (res) => {
        //请求成功时处理
        let data = res.data
        let title = ''
        if (containsChinese(data.title)) {
          title = pinyinUtil.getPinyin(data.title, '', false, false)
        } else {
          title = data.title.toLowerCase().replace(/ /g, '-')
        }

        let cateName = ''
        if (data.slug) {
          if (containsChinese(data.slug)) {
            cateName = pinyinUtil.getPinyin(data.slug, '', false, false)
          } else {
            cateName = data.slug.toLowerCase().replace(/ /g, '-')
          }
          window.location.hash = `/${cateName}/${title}`;
        }else {
          if (containsChinese(data.title)) {
            cateName = pinyinUtil.getPinyin(data.title, '', false, false)
          } else {
            cateName = data.title.toLowerCase().replace(/ /g, '-')
          }
          window.location.hash = `/${cateName}/${title}`;
        }


        $("#info_title").append(data.title);
        $("#publish_date").append(data.publish_date);
        $("#name").append(data.author.name);
        let share_setting = `
       
        `
        data.share_setting.map(res_ => {
          let href = `${window.location.href}`
          if (res_.attr == 'twitter') {
            href = `https://twitter.com/intent/tweet?text=${data.title}&url=${window.location.href}`
          } else if (res_.attr == 'facebook') {
            href = `https://www.facebook.com/sharer/sharer.php?u=${window.location.href}`
          } else if (res_.attr == 'social-in') {
            href = `https://www.linkedin.com/uas/login?session_redirect=https://www.linkedin.com/shareArticle?mini=true&url=${window.location.href}&title=${data.title}`
          } else if (res_.attr == 'social-y') {
            href = `http://news.ycombinator.com/submitlink?u=${window.location.href}`
          } else if (res_.attr == 'share') {
            href = `http://news.ycombinator.com/submitlink?u=${window.location.href}`
          }

          if (res_.attr != 'share') {
            share_setting += `
            <a target="_blank" href="${href}" rel="nofollow">
              <img alt="${res_.alt}" src="${res_.icon}">
            </a>
            `
          } else {
            share_setting += `
            <a id='share_a'  href="#" rel="nofollow">
              <img alt="${res_.alt}" src="${res_.icon}">
            </a>
            `
          }

        })
        $("#share_setting").append(share_setting);

        document.getElementById('share_a').addEventListener('click', function (event) {
          event.preventDefault();
          const htmlContent = decodeURIComponent(window.location.href)
          navigator.clipboard.writeText(htmlContent).then(function () {
            alert('Copied successfully')
          }).catch(function (error) {
            // alert('复制到剪贴板时发生错误')
          });
        });


        let cate = ` <a href="business.html?type=1&plac_id=${data.cate.id}" target="_blank">
            <h3>${data.cate.name}</h3>
          </a>`
        $("#cate").append(cate);
        $("#tagName1").append(LabelName[0].name + ':');

        let tags = ``
        data.tags.map(res_ => {
          tags += `
            <a href="business.html?type=4&plat_id=${res_.id}" target="_blank">
            <h3> ${res_.name}</h3>
              </a>
          `
        })
        $("#tags").append(tags);
        $("#tagName2").append(LabelName[1].name + ':');

        content = data.cont.content


        let authorInfo = `


        <div class="ji-posts-prev-next mao-mt mao-mb"></div>
        <div class="ji-author-meta ji-author-page mao-mb"> <img
            src="${data.author.avatar}">
          <div class="s-a-box">
            <h2><a href="business.html?a_id=${data.author.id}&type=6" target="_blank"
                class="mao-big-title mao-mb-small">${data.author.name}</a></h2>
            <div class="mao-aux-word">${data.author.describe}</div>
          </div>
        </div>
        `
        $("#authorInfo").append(authorInfo);

        let prev_next = `
        <div class="ji-posts-prev-next mao-mt mao-mb">
          <div class="s-prev">
            ${(() => {
            let tags = ``
            if (data.prev.id) {
              tags += `
              <a target="_blank" href="details.html?id=${data.prev.id}" class="mao-small-title mao-block"><i class="fa fa-angle-left"></i>
              ${Previous}</a>
              <a target="_blank" href="details.html?id=${data.prev.id}" href="">${data.prev.title}</a>
              `
            }
            return tags
          })()
          }
            
          </div>
          <div class="s-next">
            ${(() => {
            let tags = ``
            if (data.next.id) {
              tags += `
              <a target="_blank" href="details.html?id=${data.next.id}" class="mao-small-title mao-block">${Next} <i
                class="fa fa-angle-right"></i></a>
            <a target="_blank" href="details.html?id=${data.next.id}" target="_blank" href="">${data.next.title}</a>
              `
            }
            return tags
          })()
          }
           
          </div>
        </div>
        `
        $("#prev_next").append(prev_next);


      },
    });



    let data = `<div class="mao-single">
                    <p>Professionals from municipal management, scenic area management, and warehouse logistics are
                      often engaged in in-filed work; group outdoor enthusiasts are likely to carry fewer and simpler
                      tools possible. Hence, communication terminals must be both portable and lightweight to support
                      their daily tasks or adventures, enabling individuals to go with greater ease and less fatigue.
                    </p>
                    <p><img fetchpriority="high" decoding="async" class="alignnone size-full wp-image-63"
                        src="https://blog-uat.hytera.com/wp-content/uploads/2024/04/en_20240307_details_efficient_communication_across_scenarios.png"
                        alt="" width="1911" height="1075"
                        srcset="https://blog-uat.hytera.com/wp-content/uploads/2024/04/en_20240307_details_efficient_communication_across_scenarios.png 1911w, https://blog-uat.hytera.com/wp-content/uploads/2024/04/en_20240307_details_efficient_communication_across_scenarios-300x169.png 300w, https://blog-uat.hytera.com/wp-content/uploads/2024/04/en_20240307_details_efficient_communication_across_scenarios-1024x576.png 1024w, https://blog-uat.hytera.com/wp-content/uploads/2024/04/en_20240307_details_efficient_communication_across_scenarios-768x432.png 768w, https://blog-uat.hytera.com/wp-content/uploads/2024/04/en_20240307_details_efficient_communication_across_scenarios-1536x864.png 1536w"
                        sizes="(max-width: 1911px) 100vw, 1911px"></p>
                    <h2 class="anthor0"><strong>Municipal Management</strong></h2>
                    <p>Whether in implementing National and County legislation applicable to the municipality, equipped
                      to carry out tasks of fulfilling the municipality-integrated development plan, or responsive to
                      the needs of the local community to participate in the affairs of the municipality, municipal
                      management demands efficient communication. The&nbsp;<strong><a
                          href="https://www.hytera.com/en/product-new/lte-broadband/poc-radio/p30.html" target="_blank"
                          rel="noopener">P30 PoC Radio</a></strong>, weighing only 170g, offers a lightweight design
                      that reduces the burden on personnel, enhancing law enforcement efficiency and ensuring swift
                      information transmission.</p>
                    <h2 class="anthor1"><strong>Hotel Management</strong></h2>
                    <p>With compact dimensions of 118x55x22mm and a body length below 12cm, the P30 guarantees
                      flexibility and comfort for the hotel front desk, security, and catering service staff. Its
                      lightweight design promotes a smooth workflow, contributing to increased efficiency in hotel
                      services.</p>
                    <h2 class="anthor2"><strong>Exhibitions and Conferences&nbsp;</strong></h2>
                    <p>Large conferences and exhibitions involve intensive work throughout the day for numerous staff,
                      volunteers, and organizers. The P30’s lightweight design alleviates the burden on them,
                      facilitating efficient collaboration and enabling staff to provide effective services to
                      participants.</p>
                    <h2 class="anthor3"><strong>Scenic Spots and Theme Parks</strong></h2>
                    <p>Scenic spots and theme parks host various sports activities and events. The P30’s compact and
                      lightweight design, combined with its simple operation, enhances adaptability, making it ideal for
                      addressing diverse scenarios and tasks.</p>
                    <h2 class="anthor4"><strong>Outdoor Activities</strong></h2>
                    <p>In group outdoor activities, such as hiking, climbing, or biking, the P30’s lightweight and
                      portable design reduces the load on outdoor enthusiasts, providing the team with a convenient
                      means of communication during such activities.</p>
                    <p>The P30 PoC Radio stands out as a versatile solution, meeting the demands of professionals across
                      various sectors and outdoor enthusiasts. Its lightweight design, coupled with robust communication
                      capabilities, ensures efficient operations and seamless collaboration in both diverse work
                      environments and grouping fun.</p>
                  </div>`

    //替换数据
    data = content


    // 创建一个新的DOM解析器
    var parser = new DOMParser();
    // 解析富文本字符串为DOM文档
    var doc = parser.parseFromString(data, 'text/html');

    // 获取所有同级标签
    var siblings = doc.querySelector('h2') ? doc.querySelector('h2') : ''

    function getPrecedingSiblings(h2Node) {
      const siblings = [];
      let currentNode = h2Node.previousSibling;
      while (currentNode) {
        if (currentNode.nodeType === Node.ELEMENT_NODE) {
          siblings.push(currentNode);
        }
        currentNode = currentNode.previousSibling;
      }
      return siblings;
    }

    function getnextSiblings(h2Node) {
      const siblings = [];
      let currentNode = h2Node.nextElementSibling;
      while (currentNode) {
        if (currentNode.nodeType === Node.ELEMENT_NODE) {
          siblings.push(currentNode);
        }
        currentNode = currentNode.nextElementSibling;
      }
      return siblings;
    }

    if (siblings) {
      let aa = getPrecedingSiblings(siblings)
      let bb = getnextSiblings(siblings)

      aa.forEach(res => {
        let resNew = res.innerHTML
        $("#detailsBox2").append(res);
        $("#detailsBox4").append(resNew);
      })

      $("#detailsBox3").append(siblings);

      bb.forEach(res => {
        $("#detailsBox3").append(res);
      })
    } else {
      $("#detailsBox3").append(data);
    }



    // 创建一个新的DOM元素
    var tempDiv = document.createElement("div");
    // 设置其HTML内容
    tempDiv.innerHTML = data
    var h2s = tempDiv.querySelectorAll('h2') ? tempDiv.querySelectorAll('h2') : '';
    let h2Title = []

    h2s.forEach(function (h2) {
      h2Title.push(h2.innerText)
    });


    let addList = ``
    h2Title.map((res, index) => {

      addList += `<li>
                    <a name="anthor${index}" class="mao-word-second ${index == 0 ? 'active' : ''}">${res}</a>
                  </li>`
    })
    let CeilingList = `
    <div id="Ceiling" class="Ceiling">
      <h4 class="mao-small-title mao-mb-small go_gov">Contents</h4>
      <ul>
        ${addList}
      </ul>
    </div> `
    let CeilingBox_xl = `
    <div class="Ceiling">
      <h4 class="mao-small-title mao-mb-small go_gov">Contents</h4>
      <ul>
        ${addList}
      </ul>
    </div> `

    // 有h2标签再执行
    if (h2Title.length) {
      $("#CeilingBox").append(CeilingList);
      $("#CeilingBox_xl").append(CeilingBox_xl);

      // $("#detailsBox").append(data);

      var Scrollbar = window.Scrollbar;
      var Scroll = Scrollbar.init(document.querySelector('.scroll-content'));



      // 获取对于h2的top高度
      var clickTopDom = document.getElementById('detailsBox').querySelectorAll('h2');
      let topDomdata = []
      clickTopDom.forEach(res => {
        topDomdata.push(res.offsetTop)
      })

      // 遍历添加点击事件，滚动到对于位置
      var clickDom = document.getElementById('CeilingBox').querySelectorAll('a');
      clickDom.forEach((res, index) => {
        res.addEventListener("click", () => {
          Scroll.scrollTop = topDomdata[index]

          clickDom.forEach((res_, index_) => {
            res_.classList.remove('active')
          })
          res.classList.add('active')
        })
      })

      function PhoneClick(Scroll) {
        // 获取对于h2的top高度
        var clickTopDom = document.getElementById('detailsBox').querySelectorAll('h2');
        let topDomdata = []
        clickTopDom.forEach(res => {
          topDomdata.push(res.offsetTop)
        })

        var clickDom2 = document.getElementById('CeilingBox_xl').querySelectorAll('a');
        clickDom2.forEach((res, index) => {
          res.addEventListener("click", () => {
            Scroll.scrollTop = topDomdata[index]

          }, { passive: false })
        })
      }

      $(window).on('resize', (() => {
        var mq = window.matchMedia("(max-width: 767px)");
        if (mq.matches) {
          // 当前窗口宽度小于或等于767px时，执行以下代码
          PhoneClick(Scroll)
        }
      })());

      Scroll.addListener((s) => {
        var scrollTop = s.offset.y;

        const fromTop = scrollTop + 60;
        clickDom.forEach(link => link.classList.remove('active'));
        let a = 0
        Array.from(clickTopDom).findIndex((s_, index_) => {
          if (s_.offsetTop <= fromTop) {
            a = index_
          }
        })
        clickDom[a].classList.add('active');
      })
    }


    //获取相似文章
    $.ajax({
      url: `${URL_}/api/getRelatedArticles`, //请求的url地址
      dataType: "json", //返回格式为json
      async: false, //请求是否异步，默认为异步，这也是ajax重要特性
      data: {
        pla_id: getQueryId('id')
      }, //参数值
      type: "get", //请求方式
      headers: {
        'Authorization': Authorization
      },
      success: function (res) {
        //请求成功时处理
        let data = res.data
        let maomodel_last_posts = `
        <div class="container">
          <div class="row">
            <div class=" col-12 maoheader maomodel-header mao-mb-small">
              <h2 class="mao-big-title">${Related}</h2>
            </div>

            ${(() => {
            let tags = ``
            data.list.map(res_item => {
              tags += `
                <div class="col-lg-4 col-12">
                  <div class="maocontentU">
                    <a target="_blank" href="details.html?id=${res_item.cont.pla_id}" class="si-img-box">
                      <div class="ji-img"
                        style="background-image: url(${res_item.cover_img});">
                      </div>
                      <div class="ji-mask">${More}</div>
                    </a>
                    <div class="si-content mao-bg">
                      <a href="business.html?plac_id=${res_item.cate.id}&type=1" target="_blank" class="si-cat mao-btn mao-mb-small">
                        ${res_item.cate.name}
                      </a>
                      <a target="_blank" href="details.html?id=${res_item.cont.pla_id}" class="mao-small-title mao-line-2 mao-mb-small">
                        ${res_item.title}
                      </a>
                      <div class="mao-avatar-box si-meta mao-aux-word mao-mb-small">
                        <a class="mao-avatar" target="_blank" href="business.html?a_id=${res_item.author.id}&type=6">
                          <img width="30" src="${res_item.author.avatar}" alt="hytera">
                          <span>${res_item.author.name}</span>
                        </a>
                        <span>${res_item.publish_date}</span></div>
                        <a target="_blank" href="details.html?id=${res_item.cont.pla_id}" class="si-desc mao-word-second mao-line-2 maopc">
                          ${res_item.cont.content}
                          </a>
                    </div>
                  </div>
                </div>
                          `
            })
            return tags
          })()
          }
          </div>
        </div>
        `

        $("#maomodel_last_posts").append(maomodel_last_posts);

      },
    });

  </script>
  <style>

  </style>
  <!-- Start of HubSpot Embed Code -->
  <script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/23162827.js"></script>
  <!-- End of HubSpot Embed Code -->
</body>

</html>